<template>
	<view :class="[primarySize()]">
		<view class="page-foot">
			<view style="padding: 10rpx 50rpx;" @click="bindSubmit">
				<view class="btn3">确定上传</view>
			</view>
		</view>
		<view class="container">
			<view class="p30">
				<view class="upload_box">
					<view class="flex-box mb30">
						<view class="fs34 col10 mr20">生活照上传</view>
						<view class="flex-grow-1 fs24 col89">仅支持图片</view>
						<image class="icon_add" @click="uploadShow" src="https://admin.mosizp.cn/static/public/z_icon_add.png"
							mode="aspectFit" />
					</view>
					<view class="flex-box flex-wrap">
						<view class="upload" v-for="(item,index) in files">
							<image class="img1" v-if="item.file_ext == 'doc' || item.file_ext == 'docx'"
								src="https://admin.mosizp.cnhttps://admin.mosizp.cn/static/public/z_fie.jpg" mode="aspectFill" />
							<image class="img1" v-else-if="item.file_ext == 'pdf'" src="https://admin.mosizp.cn/static/public/z_fie.jpg"
								mode="aspectFill" />
							<image class="img1" v-else :src="item.file" mode="aspectFill" />
							<image class="icon_close" src="https://admin.mosizp.cn/static/public/remove-img.png" mode="aspectFit"
								@click="clearImg(index)" />
						</view>
					</view>
					<view class="tip">提示：上传个人生活照，有助于快速完成求职。平台发现有生活照比无生活照比，求职成功率提高85%（根据个人意愿上传）。</view>
				</view>
			</view>

		</view>
		<u-popup :show="popupUplodStatus" mode="center" :safeAreaInsetBottom="false" @close="uploadShow"
			bgColor="transparent">
			<view class="m_up_pop">
				<view class="type_wrap">
					<image @click="uploadShow" src="https://admin.mosizp.cn/static/public/close_img.png" mode="aspectFit"
						class="icon_close" />
					<view class="title">上传生活照</view>
					<view class="item_wrap">
						<view class="zitem" @click="chooseImage">
							<image class="img_item" src="https://admin.mosizp.cn/static/public/icon_pic2.png" mode="aspectFit"></image>
							<view>图片</view>
						</view>
						<!-- <view class="zitem" @click="chooseMeesageFile">
							<image class="img_item" src="https://admin.mosizp.cn/static/public/icon_file.png" mode="aspectFit"></image>
							<view>文件</view>
						</view> -->
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				id: 0,
				files: [],
				successFiles: [],
				popupUplodStatus: false,

			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			let page = this;
			this.getOpenerEventChannel().on('dataTransfer', data => {
				let fliesList = [];
				data.model.forEach(item => {
					fliesList.push(item)
				});
				this.files = fliesList;
			});
			this.$core.get({
				url: '/xilujob.resume/resume_files',
				data: {},
				success(ret, response) {
					page.files = ret.data
					page.successFiles = ret.data
				}
			})
		},

		methods: {
			// 上传选择展示
			uploadShow() {
				this.popupUplodStatus = !this.popupUplodStatus
			},
			//上传图片
			chooseImage() {
				let page = this;
				let len = page.files.length;
				let files = page.files;
				uni.chooseMedia({
					count: 15 - len,
					mediaType: ['image'],
					sourceType: ['album'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						let tempFiles = res.tempFiles;
						for (let i = 0; i < tempFiles.length; i++) {
							page.$core.uploadFile({
								filePath: tempFiles[i].tempFilePath,
								success(ret, response) {
									let file = {
										name: '图片',
										file_ext: page.fileExt(ret.data.url),
										file: ret.data.url
									};
									files.push(file);
									page.files = files
									page.uploadShow();
								}
							});
						}
					}
				})
			},

			fileExt(file_url) {
				return file_url.substring(file_url.lastIndexOf('.') + 1)
			},

			//上传文件
			chooseMeesageFile() {
				let page = this;
				let len = page.files.length;
				uni.chooseMessageFile({
					count: 15 - len,
					type: 'file',
					extension: ['pdf', 'doc', 'docx'],
					success(res) {
						// tempFilePath可以作为 img 标签的 src 属性显示图片
						const tempFilePaths = res.tempFiles;
						for (let i = 0; i < tempFilePaths.length; i++) {
							page.$core.uploadFile({
								filePath: tempFilePaths[i].path,
								success(ret, response) {
									let files = page.files;
									let file = {
										name: tempFilePaths[i].name,
										file_ext: page.fileExt(ret.data.url),
										file: ret.data.url
									};
									files.push(file);
									page.files = files
									page.uploadShow();
								},
								fail(err){
									console.log(err);
								}
							});
						}
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			// 提交数据
			bindSubmit(event) {
				let that = this;
				var files = that.files;
				if (files.length == 0) {
					uni.showToast({
						title: '请上传简历附件',
						icon: "none",
						duration: 3000
					});
					return false;
				}
				this.$core.post({
					url: '/xilujob.resume/add_files',
					data: {
						files: files
					},
					success: ret => {
						uni.showToast({
							title: '附件上传成功',
							icon: "none",
							duration: 1000
						});
						that.getOpenerEventChannel().emit('dataTransfer', {
							model: ret.data
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 1000)
					},
				});
			},
			// 案例删除图片
			clearImg(i) {
				var that = this;
				var index = i;
				let files = that.files;
				files.splice(index, 1);
				that.files = files
			},
			// 查看图片
			img_preview(e) {
				app.img_preview(e);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F5F7F9;
	}

	.upload_box {
		padding: 50rpx 30rpx 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.upload_box .icon_add {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.upload_box .upload {
		position: relative;
		margin: 0 30rpx 20rpx 0;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.upload_box .img1 {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.upload_box .icon_close {
		position: absolute;
		right: -16rpx;
		top: -16rpx;
		display: block;
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
	}

	.upload_box .tip {
		font-size: 24rpx;
		color: var(--primary);
		line-height: 36rpx;
	}

	.page-foot {
		background-color: #fff;
	}

	.m_up_pop {
		width: 70vw;
		border-radius: 30rpx;
	}

	.type_wrap {
		position: relative;
		padding: 60rpx 30rpx 50rpx;
		background-color: #fff;
		border-radius: 30rpx;
		text-align: center;
		color: #666;
		font-size: 30rpx;
	}

	.type_wrap .icon_close {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		display: block;
		width: 38rpx;
		height: 38rpx;
	}

	.type_wrap .title {
		margin: 0 0 40rpx;
		color: #333;
		font-size: 34rpx;
	}

	.type_wrap .item_wrap {
		display: flex;
	}

	.type_wrap .zitem {
		flex: 1;
		overflow: hidden;
	}

	.type_wrap .img_item {
		margin: 0 auto 20rpx;
		display: block;
		width: 100rpx;
		height: 100rpx;
	}
	
</style>